import React, { useCallback, useRef, useState, useEffect } from "react";
import { Carousel } from "antd";
// import MinAndMax from "@/components/MinAndMax";
import style from './styled.css'
import { V_CONTAINERER_WIDTH } from '@/utils/config'
import { bannerReq } from "@/utils/api/recommend";
import PropTypes from 'prop-types'
import { withRouter } from "react-router";

const TopBackLoopImage = ({history}) => {
  const swiper = useRef(null)
  const [Images, setImages] = useState([])

  const carouselStyle = {
    height: '284px',
    width: '733px',
  }
  const [currentIndex, setCurrentIndex] = useState(0)

  const goNextImage = useCallback(
    (str) => {
      if (str == 'next') {
        swiper.current.next()
      } else {
        swiper.current.prev()
      }
    },
    [currentIndex],
  )
  const swiperChange = useCallback((from, to) => {
    setCurrentIndex(to)
  }, [])

  const settings = {
    autoplay: true
  };

  useEffect(() => {
    const fetchData = async () => {
      const res1 = await bannerReq()
      if (res1.data.code == 200) {
        setImages(res1.data.banners);
      }
    };

    fetchData();
  }, []);

  const gotoPath = useCallback((image) => {
    switch (image.targetType) {
      case 1:
        // 跳转歌曲详情
        history.push(`song/${image.targetId}/1`)
        break;
      case 10:
        // 跳转歌曲详情
        history.push(`song/${image.targetId}/2`)
        break;
      case 3000:
        window.location.href = image.url
        // history.push(image.url)
        break;
      default:
        history.push('404')
        break;
    }

  }, [])

  const openNewWin = useCallback(() => {
    window.location.href = 'https://music.163.com/#/download'
  }, [])

  if (Images.length <= 0) {
    return <div>Loading...</div>
  }

  return (
    <div className={style.wrapperOverside} style={{ backgroundImage: `url('${Images[currentIndex].imageUrl}')` }}>
      <div className={style.oversideContent} style={{ margin: '0 auto', width: V_CONTAINERER_WIDTH }}>
        <div className={style.backImage}>
          <div className={[style.jiantou, style.jiantou_left].join(' ')} onClick={() => goNextImage('prev')}>
            <img src="https://cdn1.chinayarn.com/dsc/2020-11/img/WAlCYphpL5gThk1605794934201119.png" alt="WAlCYphpL5gThk1605794934201119" />
          </div>
          <Carousel {...settings} effect="fade" style={carouselStyle} ref={swiper} beforeChange={swiperChange}>
            {Images ? Images.map(image => (
              // <div>{image.id}</div>
              <div key={image.encodeId} onClick={() => gotoPath(image)}>
                <img src={image.imageUrl} alt={image.scm} className={style.carouse_img} />
              </div>
            )) : null}
          </Carousel>
          <img onClick={() => {openNewWin()}} src="https://cdn1.chinayarn.com/dsc/2020-11/img/zNymMphpCv02SL1605687852201118.png" alt="zNymMphpCv02SL1605687852201118" className={style.downloadImg_swiper} />
          <div className={[style.jiantou, style.jiantou_right].join(' ')} onClick={() => goNextImage('next')}>
            <img src="https://cdn1.chinayarn.com/dsc/2020-11/img/WAlCYphpL5gThk1605794934201119.png" alt="WAlCYphpL5gThk1605794934201119" />
          </div>
        </div>
      </div>
    </div>
  );
};

TopBackLoopImage.porpTypes = {
  Images: PropTypes.array.isRequired,
}

export default withRouter(TopBackLoopImage);
